<template>
  <div>
    <!-- 卡片 -->
    <el-card>
      <div style="font-size:20px;margin-bottom:20px;">视频照片列表</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入照片名称、项目名称" size="small" v-model="name" clearable @keyup.enter.native="getList(1)">
            <el-button slot="append" icon="el-icon-search" @click="getList(1)">搜索</el-button>
          </el-input>
        </el-col>
        <!-- <el-col :span="16"> -->
          <!-- <el-button @click="add" size="small">添加点位</el-button> -->
        <!-- </el-col> -->
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="pointName" label="最新上传时间" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <!-- 查看按钮 -->
            <el-button type="text" size="mini" @click="detail(scope.row.id)">查看</el-button>
            <el-button type="text" size="mini" @click="remove(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 查看弹框区域 -->
    <el-dialog title="添加点位" :visible.sync="dialogFormVisible">
      <el-form
        :label-position="labelPosition"
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        size="small"
        style="width:380px;margin: 0 auto;"
        >
        <div >
            <el-form-item label="点位名称" prop="pointName">
            <el-input v-model="form.pointName"></el-input>
            </el-form-item>
            <el-form-item label="所属项目" prop="pid">
            <el-select v-model="form.pid" placeholder="请选择所属项目" style="width:280px;" filterable>
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="安装地址" prop="pointAddress">
            <el-input v-model="form.pointAddress"></el-input>
            </el-form-item>
        </div>
        </el-form>
        <div slot="footer" class="dialog-footer botton_btn">
            <el-button type="primary" @click="save" size="small" style="margin-right:40px;">保 存</el-button>
            <el-button @click="cancel" size="small">取 消</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name:'',
      tableData: [],
      //   分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogFormVisible: false, // 弹框是否显示
      labelPosition: "left", // 表单标签文字位置
      form: {
          pointName:'',
          pointAddress: '',
          pid: ''
      },
      options: [],
      rules: {
          pointName: [
            { required: true, message: '请输入点位名称', trigger: 'blur' }
          ]
       }
    };
  },
  methods: {
      //查询所有项目 
    find() {
      this.$api.loginhome.findAllNcpr().then(res => {
        if(res.success) {
          this.options = res.data
        }
      })
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    //新增
    add() {
      this.dialogFormVisible = true
    },
    cancel() {
      this.dialogFormVisible = false
      this.$refs['form'].resetFields()
    },
     //保存新增
    save() {
        this.$refs['form'].validate((valid) => {
            if(valid) {
                this.$api.loginhome.addPoint(this.form).then(res => {
                    if(res.success) {
                        this.$message.success('添加点位成功')
                        this.dialogFormVisible = false
                        this.$refs['form'].resetFields();
                        this.getList()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            } else {
                return false
            }
        })
    },
    // 删除
    remove(row) {
        this.$confirm('此操作将删除点位, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.loginhome.deletePoint({id:row}).then(res => {
              if(res.success) {
                  this.$message.success('删除成功')
                  this.getList()
              } else {
                  this.$message.error(res.message)
              }
          })
        }) 
    },
    //查看查看详情
    detail(val) {
      this.$router.push({path:'/photoList',query:{id:val}})
    },
    //刷新列表
    getList(val) {
      if(val) {
        this.currentPage = 1
      }
      let params = {
        name: this.name,
        start: this.currentPage - 1,
        pageSize: this.pageSize
      }
      this.$api.loginhome.pointpage(params)
      .then(res => {
        this.tableData = res.data;
        this.total = res.recordsTotal
      })
      .catch(() => {
      });
    },
  },
  created() {
    this.getList();
    this.find()
  }
};
</script>

<style scoped>
.el-pagination {
  padding-top: 20px;
  text-align: right;
}
/deep/.el-table th,
.el-table tr {
  background: #e4e4e4;
}
/deep/.el-table thead {
  color: #7a7c80;
}
/deep/.el-input-group__append button.el-button {
  background-color: #409eff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 32px;
}
/deep/.el-input-group__append .el-button {
  padding: 10px 20px;
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  color: #ffffff;
}
/deep/.el-table td,
.el-table th {
  text-align: center;
}
/deep/.el-table th > .cell {
  text-align: center;
}
/deep/.el-col-16 {
  text-align: right;
}
/deep/.el-dialog__body {
  margin: -35px 0px;
}
.botton_btn {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
</style>
